<template>
  <div class="new_drugs">
    <div class="drugs_title">New Drugs</div>
    <div class="drug_card csp"
         v-for="(item,index) in druglist"
         :key="index">
      <img :src="item.icon"
           :alt="item.name"
           class="drug_img">
      <div class="drug_info">
        <div class="drug_title">{{item.name}}</div>
        <div class="drug_content">{{item.introduction}}</div>
        <div class="old_price">$12700.00</div>
        <div class="new_price">$12700.00</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDrugList } from '@/api/api'

export default {
  async fetch () {
    // 获取最新的三条药品信息
    let drugData = {

    }
  },
  data () {
    return {
      isindex: -1,
      druglist: [],
    }
  },
  async fetch () {
    let data = {
      pageNum: 1,
      pageSize: 3,
      orderByColumn: 'createTime',
      isAsc: 'desc',
      //flag: 'false',
      state: "1",
    }
    let list = await this.$axios.post(getDrugList, data)
    this.druglist = list.rows
    console.log("this.druglist", this.druglist)
  },
  methods: {
    move (index) {
      this.isindex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.new_drugs {
  margin-top: 32px;
  .drugs_title {
    font-weight: bold;
    font-size: 24px;
    color: #0041a3;
    line-height: 52px;
  }
  .drug_card {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e8eb;
    padding: 32px 0;
    padding-left: 16px;
    .drug_img {
      width: 120px;
      height: 120px;
    }
    .drug_info {
      margin: 8px 0 8px 8px;
      .drug_title {
        font-weight: bold;
        font-size: 16px;
        color: #293347;
        line-height: 16px;
      }
      .drug_content {
        font-weight: 400;
        font-size: 14px;
        color: #5a6478;
        line-height: 20px;
        margin-top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .old_price {
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 12px;
        color: #8a95a2;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-decoration-line: line-through;
        text-transform: none;
      }
      .new_price {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 20px;
        color: #0041a3;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .active {
    background: #f5f8fd !important;
  }
}
</style>